<template>
    <div>
        <!-- 资源管理 -->
        <div class="all-container">
            <!-- 功能栏 -->
            <el-row>
                <el-col :span="24" class="table-fun">
                    <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="refresh">刷新</div>
                    <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="modWin=true;winTitle='添加'">添加</div>
                    <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="modWin=true;winTitle='修改'">修改</div>
                </el-col>
            </el-row>
            <!-- 数据表格栏 -->
             <avue-tree-table :option="treeList"></avue-tree-table>
            <!-- 修改弹窗 -->
            <div v-if="modWin" class="addModal">
                <!-- 标题栏 -->
                <el-row class="add-title">
                     <div class="closeWin" @click="closeModWin">X</div>
                    <el-col :span="24">
                        <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">{{winTitle}}</span>
                    </el-col>
                </el-row>
                <!-- 表单栏 -->
                <el-row class="form-container">
                    <el-col :span="24">
                        <!-- 第一行 -->
                        <el-row class="org-rows">
                            <el-col :span="24">
                                <div class="lf choose-title org-title">资源名称</div>
                                <el-input v-model="resourName" placeholder="" size="mini" style="width:160px;" class="lf choose-input org-input"></el-input>
                                <div class="lf choose-title org-title">排序号</div>
                                <el-input v-model="indexNum" placeholder="" size="mini" style="width:160px;" class="lf choose-input org-input"></el-input>
                            </el-col>
                        </el-row>
                        <!-- 第二行 -->
                        <el-row class="org-rows">
                            <el-col :span="24">
                                <div class="lf choose-title res-title">资源值</div>
                                <el-input v-model="resourNum" placeholder="" size="mini" style="width:160px;" class="lf choose-input org-input"></el-input>
                                <div class="lf choose-title  res-title2">类型</div>
                                <el-input v-model="types" placeholder="" size="mini" style="width:160px;" class="lf choose-input org-input"></el-input>
                            </el-col>
                        </el-row>
                        <!-- 第三行 -->
                        <el-row class="org-rows">
                            <el-col :span="24">
                                <div class="lf choose-title res-title">父节点</div>
                                 <div class="lf dataSet-container">
                                    <el-tree :data="resourList" :props="defaultProps" @node-click="nodeTree"  :default-expand-all="fatherShow"  show-checkbox></el-tree>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <!-- 按钮 -->
                <button class="check-btn rf" @click="cancelMod">
                <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                <button class="check-btn rf" @click="winTitle=='添加'?add():modified()"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确认</button>
            </div>
        </div>
    </div>
</template>

<script>                                                                                                                                import qs from "qs";
export default {
  data: function() {
    return {
      treeList:{
        expandAll:false,
        highlightCurrentRow:true,
        columns:[
          {
            text:"资源名称",
            value:"name",
          },
          {
            text:"值",
            value:"id"
          },
          {
            text:"类别",
            value:"type"
          },
          {
            text:"排序",
            value:"idx"
          },
        ],
        data:[]
      },
      resourList: [],
      valueList: [],
      typeList: [],
      orderList: [],
      sortList: [],
      fatherShow: true,
      detailShow: true,
      defaultProps: {
        children: "children",
        label: "label"
      },
      resourName: "",
      resourNum:"",
      types:"",
      indexNum: "",
      modWin: false,
      winTitle:"test"
    };
  },
  methods: {
   getTreelist(){
     this.postRequest("/sys/permission/tree?sort=idx&order=asc").then(data=>{
       console.log(data);
       var i=0;
       for(var item of data.data){
         this.treeList.data.push({
           name:item.name,
           id:item.id,
           idx:item.idx,
           type:item.type,
           children:[]
         });
         if(item.children!=undefined){
           for(var j of item.children){
              this.treeList.data[i].children.push({
                name:j.name,
                id:j.id,
                idx:j.idx,
                type:j.type,
              });
           }
         }
         i++;
       }
     })
   },
   getResourList() {
      this
        .postRequest(
          "/sys/permission/tree?sort=idx&order=asc"
        )
        .then(data => {
          // 动态添加父
          for (var item of data.data) {
            console.log(data.data);
            this.resourList.push({
              label: item.name,
              children: []
            });
            this.valueList.push({
              label: "模块",
              children: []
            });
            this.typeList.push({
              label: "权限",
              children: []
            });
            this.sortList.push({
              label: "1010",
              children: []
            });
            // 动态添加子
            for (var j of item.children) {
              var i = 0;
              for (var k of this.resourList) {
                this.resourList[i].children.push({
                  label: j.name,
                  pid: j.pid,
                  type: j.type,
                  idx: j.idx,
                  value: j.value,
                  id: j.id
                });
                this.valueList[i].children.push({
                  label: j.pid
                });
                this.typeList[i].children.push({
                  label: j.type
                });
                this.sortList[i].children.push({
                  label: j.idx
                });
                i++;
              }
            }
            // console.log(this.resourList);
            // console.log(this.resourList);
          }
        });
    },
   nodeTree(){
    this.fatherShow = !this.fatherShow;
    this.detailShow = !this.detailShow;
   },
    refresh() {
      this.treeList.data = [];
      this.getTreelist();
    },
    add() {
      this
        .getRequest(
          "/sys/permission/add?sysRes.id=&sysRes.name="+this.resourName+"&sysRes.value="+this.resourNum+"&sysRes.idx="+this.indexNum+"&sysRes.type="+this.types+"&sysRes.pid="
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getTreelist();
            this.modWin=false;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    cancelMod() {
      this.modWin = false;
    },
    modified() {
      this
        .getRequest(
          "/sys/permission/add?sysRes.id=&sysRes.name="+this.resourName+"&sysRes.value="+this.resourNum+"&sysRes.idx="+this.indexNum+"&sysRes.type="+this.types+"&sysRes.pid=1"
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getTreelist();
            this.modWin=false;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    closeModWin() {
      this.modWin = false;
    },
    mod() {
      this.modWin = true;
      this.getResourList();
    }
  },
  computed: {},
  watch: {},
  mounted() {
    console.log("resourManage");
    this.getTreelist();
    this.$emit("sendActive", "2-4");
  }
};
</script>
<style scoped src="../../assets/css/allManage/resourManage.css">
</style>